<template>
  <div class="settings_container">
    <h2 class="title">通用配置</h2>
    <el-divider class="custom-divider"></el-divider>
    <div class="hotkey_container">
      <div v-for="(hotkey, index) of hotkeys" :key="index" class="hotkey_card">
        <div class="hotkey_label">{{ getHotkeyName(hotkey.desc) }}：</div>
        <el-button @click="handleListener(hotkey)" class="hotkey_button">
          {{ hotkey.key }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import request from '@/utils/request.js'
import { ref, onMounted, onUnmounted, inject } from 'vue'

const hotkeys = ref([])
const hotkeyMap = {
  'mouse.toggle': '鼠标界面切换',
  'keyboard.toggle': '键盘界面切换',
  'record.toggle': '记录切换',
  'record.run.toggle': '记录运行切换',
  'script.run.toggle': '脚本运行切换',
}

const getHotkeyName = (key) => {
  return hotkeyMap[key] || key
}

const getHotkeys = async () => {
  const res = await request.post('/setting/list')
  hotkeys.value = res.data.list
}

const handleListener = async (hotkey) => {
  const res = await request.post('/setting/firstKey', { key: hotkey.desc })
}
onMounted(getHotkeys)

const webSocketManager = inject('webSocketManager') // 通过inject获取全局实例
// WebSocket订阅回调
const handleHotkeyStatus = (status) => {
  hotkeys.value = status
}
// 页面挂载时：订阅+绑定接口
onMounted(async () => {
  // 订阅WebSocket频道
  webSocketManager.subscribe('/topic/hotkey', handleHotkeyStatus)
})
// 页面卸载时：取消订阅+解绑接口
onUnmounted(async () => {
  // 取消WebSocket订阅
  webSocketManager.unsubscribe('/topic/hotkey')
})
</script>

<style lang="less" scoped>
@import url('../assets/main.less');

.settings_container {
  padding: 0px 24px;
  border-radius: 12px;

  .title {
    color: var(--el-text-color-primary);
    font-size: 1.5em;
    margin-bottom: 1em;
    position: relative;
    margin-top: 10px;

    &::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 0;
      width: 50px;
      height: 3px;
      background: @primary-color;
    }
  }

  .hotkey_container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    height: calc(100vh - 200px);
    overflow-x: auto;

    .hotkey_card {
      background: #f8f9fa;
      border-radius: 10px;
      padding: 20px;
      transition: all 0.3s;
      border: 1px solid #e9ecef;
      display: flex;
      height: 32px;
      justify-items: center;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      }

      .hotkey_label {
        color: #495057;
        font-size: 0.95em;
        font-weight: 500;
        width: 50%;
        line-height: 32px;
        height: 32px;
      }

      .hotkey_button {
        width: 50%;
        background: #fff;
        border: 1px solid #dee2e6;
        color: @primary-color;
        font-weight: 600;
        letter-spacing: 1px;
        transition: all 0.2s;

        &:hover {
          background: @primary-color;
          color: #fff;
          border-color: @primary-color;
        }
      }
    }
  }
}
</style>
